<script setup>

import { ref, useAttrs, useSlots } from 'vue';

const props = defineProps({
  abc:{}
})

// hooks：钩子函数
const slots = useSlots();
const attrs = useAttrs();

console.log(slots);
console.log(slots.header());
console.log(slots.body());
console.log(slots.footer());
console.log(attrs);
console.log(attrs.class);
console.log(attrs.id);
console.log(attrs.title);
console.log(attrs.abc);

const title = ref("这是子组件的title");

defineExpose({
  title
})

const data = await fetch("http://20.187.111.28:3000/getgoods").then(res=>res.json());
console.log(data);

</script>
<script>

</script>

<template>
  <div class="helloBox" id="aaa" abc="this is abc">
    <h1>这是hello组件 - {{title}}</h1>
    <hr>
    <slot name="header"></slot>
    <hr>
    <slot name="body"></slot>
    <hr>
    <slot name="footer"></slot>
  </div>
</template>
